<!--
*  功能描述：部门管理页面
 -->
 <template>
  <div class="div0">
    <!-- 部门搜索 -->
    <div class="div1">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
          <template slot="title">
            <i class="header-icon el-icon-search"></i
            ><span class="collapsetitle">部门搜索</span>
          </template>
          <div class="collapsediv1">
            <span style="font-size: 15px">部门名称：</span
            ><el-input v-model="DepName" class="input1"></el-input>
            <el-button type="primary" @click="GetDep()">查询</el-button>
            <el-button type="primary" @click="openAdd()">添加</el-button>
            <el-button type="primary">删除</el-button>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 部门加载 -->
    <div class="div2">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="2">
          <template slot="title">
            <i class="header-icon el-icon-s-order"></i
            ><span class="collapsetitle">信息列表</span>
          </template>
          <div class="collapsediv1">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              class="table1"
              @selection-change="handleSelectionChange"
              stripe
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column prop="DepId" label="编号"> </el-table-column>
              <el-table-column prop="DepName" label="部门名称">
              </el-table-column>
              <el-table-column prop="DepSuperiorNmae" label="上级部门">
              </el-table-column>
              <el-table-column label="部门列表"> </el-table-column>
              <el-table-column prop="DepDescribe" label="部门描述">
              </el-table-column>
              <el-table-column prop="DicName" label="部门类型">
              </el-table-column>
              <el-table-column prop="DepSort" label="排序"> </el-table-column>
              <el-table-column label="选择"> </el-table-column>
            </el-table>
            <div>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageindex"
                :page-sizes="[1, 5, 10, 20]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagetotal"
              >
              </el-pagination>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 部门添加 -->
    <div >
      <el-dialog title="添加部门" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="上级部门" :label-width="formLabelWidth">
            <el-select v-model="form.depSuperior" placeholder="请选择">
              <el-option
                v-for="item in superoptions"
                :key="item.DepId"
                :label="item.DepName"
                :value="item.DepId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门名称" :label-width="formLabelWidth">
            <el-input
              v-model="form.depName"
              autocomplete="off"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-form-item label="部门类型" :label-width="formLabelWidth">
            <el-select v-model="form.depType" placeholder="请选择">
              <el-option
                v-for="item in Dicptions"
                :key="item.DicId"
                :label="item.DicName"
                :value="item.DicId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门描述" :label-width="formLabelWidth">
            <el-input
              v-model="form.depDescribe"
              autocomplete="off"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input
              v-model="form.depSort"
              autocomplete="off"
              style="width: 220px"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="AddDep()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
 <script>
export default {
  data() {
    return {
      activeNames: ["1", "2"],
      DepName: "", //部门名称,
      pageindex: 1, //当前页码
      pagesize: 5,
      pagetotal: 0,
      tableData: [],
      handleSelectionChange: "",
      dialogFormVisible: false, //打开添加对话框
      form: {}, //添加
      superoptions: [], //上级部门
      Dicptions: [], //部门类型
      formLabelWidth: "120px",
    };
  },
  created() {
    this.GetDep();
    this.superDep();
    this.superDic();
  },
  computed: {},
  methods: {
    //加载部门
    GetDep() {
      this.$http
        .get("Institutionalsetting/GetDep?", {
          params: {
            DepName: this.DepName,
            pageindex: this.pageindex,
            pagesize: this.pagesize,
          },
        })
        .then((res) => {
          this.tableData = res.data.PageData;
          this.pagetotal = res.data.RecordTotal;
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.GetDep();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageindex = val;
      this.GetDep();
      console.log(`当前页: ${val}`);
    },
    //打开部门添加
    openAdd() {
      this.dialogFormVisible = true;
    },
    //添加部门
    AddDep() {
      this.$http.post("Institutionalsetting/AddUser", this.form).then((res) => {
        if (res.data.Code == 200) {
          this.dialogFormVisible = false;
          this.GetDep();
          this.$notify({
            title: "成功",
            message: "添加成功",
            type: "success",
          });
        } else {
          this.GetDep();
          this.$notify.error({
            title: "错误",
            message: res.data.Message,
          });
        }
      });
    },
    //上级部门
    superDep() {
      this.$http.get("Institutionalsetting/selecDep").then((res) => {
        this.superoptions = res.data.Data;
      });
    },
    //部门类型
    superDic() {
      this.$http.get("Institutionalsetting/selecDic?DicCode=d_t").then((res) => {
        this.Dicptions = res.data.Data;
      });
    },
    //批量删除部门

  },
};
</script>
 <style  scoped>
.collapsetitle,
.header-icon {
  color: white;
  font-size: 20px;
  margin-left: 10px;

}
.collapsediv1 {
  margin-top: 20px;
  margin-left: 20px;
}
.input1 {
  width: 200px;
  margin-left: 10px;
  margin-right: 10px;
}
.div2 {
  margin-top: 20px;
}
.table1 {
  width: 99%;
  border: 2px solid #eceef5;
  border-radius: 6px;
}
</style>
<style>
.el-collapse-item__header {
  background-color: #7ACCC6;
  height: 30px;
  border-radius: 4px 4px 0px 0px;
}
.el-collapse {

  border-radius: 6px;
}
.el-collapse-item__wrap {
  border-radius: 0px 0px 6px 6px;
  border: 2px  solid #7ACCC6;
  border-top: 0px  solid #7ACCC6;
}
</style>
 